<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control class="control" :current="current" :values="items" :style-type="styleType" :active-color="activeColor"
			 @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-show="current === 0">
				<view class="select-box">
					<sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
				</view>
				<view class="dates-box">
					<view class="dates f-row-between">
						<view class="date f-center" :style="{ width: 100 / 4 - 3 + '%' }" :class="selected == 'd' ? 'selected' : ''"
						 @click="selected = 'd'">
							日
						</view>
						<view class="date f-center" :style="{ width: 100 / 4 - 3 + '%' }" :class="selected == 'mz' ? 'selected' : ''"
						 @click="selected ='mz'">
							周
						</view>
						<view class="date f-center" :style="{ width: 100 / 4 - 3 + '%' }" :class="selected == 'm' ? 'selected' : ''"
						 @click="selected ='m'">
							月
						</view>
						<view class="date f-center" :style="{ width: 100 / 4 - 3 + '%' }" :class="selected == 'y' ? 'selected' : ''"
						 @click="selected = 'y'">
							年
						</view>
					</view>
					<uni-superDates :dateTypes="['d', 'mz', 'm', 'y']" :selected="selected" v-on:onSubmit="onSubmit"></uni-superDates>
				</view>
				<view class="chart-box" v-if="resData.lists[resData.tableName['0']].length > 0">
					<view class="money-block f-center">
						<view class="money-item f-column-WHcenter">
							<!-- 冠军 -->
							<label class="label icons iconguanjunbangbiaozhi"></label>
							<view class="money f-row-Wcenter">
								<label v-show="resData.sortkey != 'sale_qty'">￥</label>
								<!-- 分段汇总表[表名[分段下标]][按表名字段统计].(数量,单位,名称) -->
								<label>{{ resData.total[resData.tableName['0']][resData.sortkey].numder }}</label>
								<label class="unit" v-if="
										resData.total[resData.tableName['0']][resData.sortkey].sourceNumder > 1000 &&
											-1000 < resData.total[resData.tableName['0']][resData.sortkey].sourceNumder
									">
									{{ resData.total[resData.tableName['0']][resData.sortkey].unit }}
								</label>
							</view>
							<view>
								<label class="title">{{ resData.total[resData.tableName['0']][resData.sortkey].item_name }}</label>
							</view>
						</view>
					</view>
				</view>
				<view class="retailDetails-box f-column">
					<view class="sun-tietleBox">
						<sun-tietleBox :tietleData="'商品分析排名'">
							<view class="datas f-row-Hcenter">
								<view class="date f-center" :class="resData.sortkey == 'sale_qty' ? 'selected' : ''" @click="onDateType('sale_qty')">按销量</view>
								<view class="date f-center" :class="resData.sortkey == 'sale_amt' ? 'selected' : ''" @click="onDateType('sale_amt')">按金额</view>
								<view class="date f-center" :class="resData.sortkey == 'ml_amt' ? 'selected' : ''" @click="onDateType('ml_amt')">按毛利</view>
							</view>
						</sun-tietleBox>
					</view>
					<view :id="idTopHeight" class="table-box f-row-Wcenter" :style="{padding:tableMargin +'rpx'}">
						<!-- height="600rpx" -->
						<wyb-table ref="table" :width="'710rpx'" :defaultColWidth="defaultColWidth" :headers="headers" :contents="resData.lists[resData.tableName['0']]"
						 :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="resData.total[resData.tableName['0']][resData.sortkey].tableloading"
						 :first-line-fixed="false" :maxHeight="topHeight - (tableMargin * 3) +'rpx'" :url-col="urlCol" :min-height="[60]" />
					</view>
				</view>
			</view>
			<view v-show="current == 1">
				<view class="select-box">
					<sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
				</view>
				<view class="dates-box">
					<view class="dates f-row-between">
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'd' ? 'selected' : ''"
						 @click="selected = 'd'">
							日
						</view>
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'mz' ? 'selected' : ''"
						 @click="selected ='mz'">
							周
						</view>
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'm' ? 'selected' : ''"
						 @click="selected ='m'">
							月
						</view>
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'y' ? 'selected' : ''"
						 @click="selected = 'y'">
							年
						</view>
					</view>
					<uni-superDates :dateTypes="['d', 'mz', 'm', 'y']" :selected="selected" v-on:onSubmit="onSubmit"></uni-superDates>
				</view>
				<view class="chart-box" v-if="resData.lists[resData.tableName['1']].length > 0">
					<view class="money-block f-center">
						<view class="money-item f-column-WHcenter">
							<label class="label icons iconguanjunbangbiaozhi"></label>
							<view class="money f-row-Wcenter">
								<label v-show="resData.sortkey != 'sale_qty'">￥</label>
								<!-- 分段汇总表[表名[分段下标]][按表名字段统计].(数量,单位,名称) -->
								<label>{{ resData.total[resData.tableName['1']][resData.sortkey].numder }}</label>
								<label class="unit" v-if="
										resData.total[resData.tableName['1']][resData.sortkey].sourceNumder > 1000 &&
											-1000 < resData.total[resData.tableName['1']][resData.sortkey].sourceNumder
									">
									{{ resData.total[resData.tableName['1']][resData.sortkey].unit }}
								</label>
							</view>
							<view>
								<label class="title">{{ resData.total[resData.tableName['1']][resData.sortkey].cls_name }}</label>
							</view>
						</view>
					</view>
				</view>
				<view class="retailDetails-box f-column">
					<view class="sun-tietleBox">
						<sun-tietleBox :tietleData="'类别分析排名'">
							<view class="datas f-row-Hcenter">
								<view class="date f-center" :class="resData.sortkey == 'sale_qty' ? 'selected' : ''" @click="onDateType('sale_qty')">按销量</view>
								<view class="date f-center" :class="resData.sortkey == 'sale_amt' ? 'selected' : ''" @click="onDateType('sale_amt')">按金额</view>
								<view class="date f-center" :class="resData.sortkey == 'ml_amt' ? 'selected' : ''" @click="onDateType('ml_amt')">按毛利</view>
							</view>
						</sun-tietleBox>
					</view>
					<view class="table-box f-row-Wcenter" :style="{padding:tableMargin +'rpx'}">
						<!-- height="600rpx" -->
						<wyb-table ref="table" :width="'710rpx'" :defaultColWidth="defaultColWidth" :headers="headers" :contents="resData.lists[resData.tableName['1']]"
						 :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="resData.total[resData.tableName['1']][resData.sortkey].tableloading"
						 :first-line-fixed="false" :maxHeight="topHeight - (tableMargin * 3) +'rpx'" :url-col="urlCol" :min-height="[65,50]" />
					</view>
				</view>
			</view>
			<view v-show="current == 2">
				<view class="select-box">
					<sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
				</view>
				<view class="dates-box">
					<view class="dates f-row-between">
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'd' ? 'selected' : ''"
						 @click="selected = 'd'">
							日
						</view>
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'mz' ? 'selected' : ''"
						 @click="selected ='mz'">
							周
						</view>
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'm' ? 'selected' : ''"
						 @click="selected ='m'">
							月
						</view>
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'y' ? 'selected' : ''"
						 @click="selected = 'y'">
							年
						</view>
					</view>
					<uni-superDates :dateTypes="['d', 'mz', 'm', 'y']" :selected="selected" v-on:onSubmit="onSubmit"></uni-superDates>
				</view>
				<view class="chart-box" v-if="resData.lists[resData.tableName['2']].length > 0">
					<view class="money-block f-center">
						<view class="money-item f-column-WHcenter">
							<label class="label icons iconguanjunbangbiaozhi"></label>
							<view class="money f-row-Wcenter">
								<label v-show="resData.sortkey != 'sale_qty'">￥</label>
								<!-- 分段汇总表[表名[分段下标]][按表名字段统计].(数量,单位,名称) -->
								<label>{{ resData.total[resData.tableName['2']][resData.sortkey].numder }}</label>
								<label class="unit" v-if="
										resData.total[resData.tableName['2']][resData.sortkey].sourceNumder > 1000 &&
											-1000 < resData.total[resData.tableName['2']][resData.sortkey].sourceNumder
									">
									{{ resData.total[resData.tableName['2']][resData.sortkey].unit }}
								</label>
							</view>
							<view>
								<label class="title">{{ resData.total[resData.tableName['2']][resData.sortkey].brand_name }}</label>
							</view>
						</view>
					</view>
				</view>
				<view class="retailDetails-box f-column">
					<view class="sun-tietleBox">
						<sun-tietleBox :tietleData="'品牌分析排名'">
							<view class="datas f-row-Hcenter">
								<view class="date f-center" :class="resData.sortkey == 'sale_qty' ? 'selected' : ''" @click="onDateType('sale_qty')">按销量</view>
								<view class="date f-center" :class="resData.sortkey == 'sale_amt' ? 'selected' : ''" @click="onDateType('sale_amt')">按金额</view>
								<view class="date f-center" :class="resData.sortkey == 'ml_amt' ? 'selected' : ''" @click="onDateType('ml_amt')">按毛利</view>
							</view>
						</sun-tietleBox>
					</view>
					<view class="table-box f-row-Wcenter" :style="{padding:tableMargin +'rpx'}">
						<!-- height="600rpx" -->
						<wyb-table ref="table" :width="'710rpx'" :defaultColWidth="defaultColWidth" :headers="headers" :contents="resData.lists[resData.tableName['2']]"
						 :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="resData.total[resData.tableName['2']][resData.sortkey].tableloading"
						 :first-line-fixed="false" :maxHeight="topHeight - (tableMargin * 3) +'rpx'" :url-col="urlCol" :min-height="[65,50]" />
					</view>
				</view>
			</view>
			<view v-show="current == 3">
				<view class="select-box">
					<sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
				</view>
				<view class="dates-box">
					<view class="dates f-row-between">
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'd' ? 'selected' : ''"
						 @click="selected = 'd'">
							日
						</view>
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'mz' ? 'selected' : ''"
						 @click="selected ='mz'">
							周
						</view>
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'm' ? 'selected' : ''"
						 @click="selected ='m'">
							月
						</view>
						<view class="date f-center" :style="{ width: 100 / dateTypes.length - 3 + '%' }" :class="selected == 'y' ? 'selected' : ''"
						 @click="selected = 'y'">
							年
						</view>
					</view>
					<uni-superDates :dateTypes="['d', 'mz', 'm', 'y']" :selected="selected" v-on:onSubmit="onSubmit"></uni-superDates>
				</view>
				<view class="chart-box" v-if="resData.lists[resData.tableName['3']].length > 0">
					<view class="money-block f-center">
						<view class="money-item f-column-WHcenter">
							<label class="label icons iconguanjunbangbiaozhi"></label>
							<view class="money f-row-Wcenter">
								<label v-show="resData.sortkey != 'sale_qty'">￥</label>
								<!-- 分段汇总表[表名[分段下标]][按表名字段统计].(数量,单位,名称) -->
								<label>{{ resData.total[resData.tableName['3']][resData.sortkey].numder }}</label>
								<label class="unit" v-if="
										resData.total[resData.tableName['3']][resData.sortkey].sourceNumder > 1000 &&
											-1000 < resData.total[resData.tableName['3']][resData.sortkey].sourceNumder
									">
									{{ resData.total[resData.tableName['3']][resData.sortkey].unit }}
								</label>
							</view>
							<view>
								<label class="title">{{ resData.total[resData.tableName['3']][resData.sortkey].sup_name }}</label>
							</view>
						</view>
					</view>
				</view>
				<view class="retailDetails-box f-column">
					<view class="sun-tietleBox">
						<sun-tietleBox :tietleData="'商货分析排名'">
							<view class="datas f-row-Hcenter">
								<view class="date f-center" :class="resData.sortkey == 'sale_qty' ? 'selected' : ''" @click="onDateType('sale_qty')">按销量</view>
								<view class="date f-center" :class="resData.sortkey == 'sale_amt' ? 'selected' : ''" @click="onDateType('sale_amt')">按金额</view>
								<view class="date f-center" :class="resData.sortkey == 'ml_amt' ? 'selected' : ''" @click="onDateType('ml_amt')">按毛利</view>
							</view>
						</sun-tietleBox>
					</view>
					<view class="table-box f-row-Wcenter" :style="{padding:tableMargin +'rpx'}">
						<!-- height="600rpx" -->
						<wyb-table ref="table" :width="'710rpx'" :defaultColWidth="defaultColWidth" :headers="headers" :contents="resData.lists[resData.tableName['3']]"
						 :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="resData.total[resData.tableName['3']][resData.sortkey].tableloading"
						 :first-line-fixed="false" :maxHeight="topHeight - (tableMargin * 3) +'rpx'" :url-col="urlCol" :min-height="[65,50]" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
	import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';
	import api_server from '@/api/api_server.js';

	import wybTable from '@/components/wyb-table/wyb-table.vue';
	export default {
		components: {
			wybTable,
			sunDropDown,
			sunTietleBox
		},
		data() {
			return {
				//平分表宽
				defaultColWidth: 167,

				sort_type: '',
				dateTypes: ['d', 'mz', 'm', 'y'],
				selected: 'mz',
				//日期轮播
				background: ['color1', 'color2', 'color3'],

				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				scrollTop: 0,

				//图表数据 取resData.list中的列数据
				chartData: {
					categories: [],
					series: {}
				},

				//源数据
				resData: {
					//汇总数据,默认按销量
					sortkey: 'sale_qty',
					sort_type: {
						sale_qty: "1",
						sale_amt: "2",
						ml_amt: "3"
					},
					total: {
						goods: {
							tableloading: false,
							sale_qty: {
								sale_qty:  {
									numder :0,
									tableloading: false,
								},
								sale_amt:  {
									numder :0,
									tableloading: false,
								},
								ml_amt:  {
									numder :0,
									tableloading: false,
								}
							}
						},
						calss: {
							tableloading: false,
							sale_qty: {
								tableloading: false,
								sale_qty:  {
									numder :0,
									tableloading: false,
								},
								sale_amt:  {
									numder :0,
									tableloading: false,
								},
								ml_amt:  {
									numder :0,
									tableloading: false,
								}
							}
						},
						brand: {
							tableloading: false,
							sale_qty: {
								tableloading: false,
								sale_qty:  {
									numder :0,
									tableloading: false,
								},
								sale_amt:  {
									numder :0,
									tableloading: false,
								},
								ml_amt:  {
									numder :0,
									tableloading: false,
								}
							}
						},
						supplier: {
							tableloading: false,
							sale_qty: {
								tableloading: false,
								sale_qty:  {
									numder :0,
									tableloading: false,
								},
								sale_amt:  {
									numder :0,
									tableloading: false,
								},
								ml_amt:  {
									numder :0,
									tableloading: false,
								}
							}
						}
					},
					tableName: {
						"0": 'goods',
						"1": 'calss',
						"2": 'brand',
						"3": 'supplier'
					},
					lists: {
						goods: [
							// 	{
							// 	item_subno: '', //string 货号
							// 	item_barcode: '', // string 条码
							// 	item_name: '', // string 品名
							// 	sale_qty: '', // int 销量
							// 	sale_amt: '', // numeric(10,2) 金额
							// 	ml_amt: '' // numeric(10,2) 毛利额
							// }
						],
						calss: [],
						brand: [],
						supplier: []
						
					}
				},
				contents: [],

				urlCol: [{
						type: 'route',
						key: 'url'
					},
					{
						type: 'http',
						key: 'link'
					}
				],
				//查询query.dateSelect时间段
				query: {
					dateType: 'mz',
					dateSelect: [],
					anatype: 1, //分析周期 1、按周 2、按月 3、按年
					tottype: 1, //数据类型 1、全部 2、线上 3、线下
					branch_jg: '%', //机构 支持%为全部机构
					start_date: 10000000,
					end_date: 10000000,

					//
					sort_type: 1, //是 tinyint 排序规则 1销量 2金额 3 毛利
					pageindex: 1, //是 int 页索引 此报表目前固定返回5行，所以此值可以固定传1
					pagesize: 9999 // 是 int 页大小 此报表目前固定返回5行，所以此值可以固定传5
				},
				fromData: {
					version: '1',
					pageNo: 1,
					onePageNum: 10
				},
				//分段
				items: ['商品分析', '类别分析', '品牌分析', '商货分析'],
				current: 0,
				colorIndex: 0,
				activeColor: '#128A80', //选中的标签背景色与边框颜色
				styleType: 'button',
				apiServer: {
					goods: api_server.dwzy_GetAppSaleSortItemAnalysisList,
					calss: api_server.dwzy_GetAppSaleSortClsAnalysis,
					brand: api_server.dwzy_GetAppSaleSortBrandAnalysis,
					supplier: api_server.dwzy_GetAppSaleSortSupAnalysis
				},
				header: [{
						label: '商品名称',
						key: 'item_name',
						width: 280
					},
					{
						label: '销量',
						key: 'sale_qty',
					},
					{
						label: '金额',
						key: 'sale_amt'
					},
					{
						label: '毛利额',
						key: 'ml_amt'
					}
				],
				//表格高度变量
				idTopHeight: 'table-box',
				tableMargin: 20,
				topHeight: 100
			};
		},
		onLoad() {


		},
		computed: {
			userInfo() {
				var userInfo = this.$store.getters.getUserInfo;
				return userInfo;
			},
			//定义头部字段
			headers() {
				let header = this.header;
				if (this.current == 0) {
					header[0].label = '商品名称'
					header[0].key = 'item_name'
				}
				if (this.current == 1) {
					header[0].label = '类别名称'
					header[0].key = 'cls_name'
				}
				if (this.current == 2) {
					header[0].label = '品牌名称'
					header[0].key = 'brand_name'
				}
				if (this.current == 3) {
					header[0].label = '货商名称'
					header[0].key = 'sup_name'
				}
				return header;
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.onSubmitSend();
				//渲染数据
				//this.onChartDataType();
			});
			this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
			this.$util.getDefaultColWidth(this, 710, 'headers', 'defaultColWidth');
		},
		methods: {
			//点击排序
			onDateType(str) {
				this.resData.sortkey = str;
				this.login();
			},
			//点击分段
			onClickItem(e) {
				this.current = e.currentIndex;
				this.login();
			},
			//时间回调
			onSubmitSend() {
				this.$emit('onSubmitSend', false);
			},
			//处理反馈
			onSubmit(dates) {
				//console.log('onSubmit>>>', dates);
				if (dates) {
					//清除旧数据
					this.resData.list = [];
					this.query = { ...this.query,
						...dates
					};
					this.login();
				}
			},
			login(current) {
				let that = this;
				if (!current) {
					current = that.current;
				}
				if (!that.query.branch_jg != '') {
					that.query.branch_name = that.userInfo.branch_name;
					that.query.branch_jg = that.userInfo.branch_default;
				}
				let query = that.query;

				let tableName = that.resData.tableName[current];
				let key = that.resData.sortkey;

				query.sort_type = that.resData.sort_type[key];
				query = { ...that.fromData,
					Params: query
				};


				that.resData.total[tableName] = that.resData.total[tableName] ? that.resData.total[tableName] : {};
				that.resData.total[tableName][key] = that.resData.total[tableName][key] ? that.resData.total[tableName][key] : {};

				//分段汇总表[表名[分段下标]][按表名字段统计].(数量,单位,名称)

				//that.resData.total[tableName].tableloading = true;

				that.apiServer[tableName]({
					data: query,
					success: res => {
						if (res.data.data) {
							//console.log(current);
							let tableName = that.resData.tableName[current];
							let key = that.resData.sortkey;
							that.resData.lists[tableName] = res.data.data;
							//取第一条 排名第一

							that.resData.lists[tableName] = that.resData.lists[tableName] ? that.resData.lists[tableName] : [];
							let numberobj = that.$util.moneyUnit(that.resData.lists[tableName][0][key]);
							that.resData.total[tableName][key] = { ...that.resData.lists[tableName][0],
								...numberobj
							};
							//分段汇总表[表名[分段下标]][按表名字段统计].(数量,单位,名称)
							//that.resData.total[tableName][key].tableloading = false;



							this.$forceUpdate();
						}
					},
					fail(error) {
						console.log('error', error);
					}
				});
			},
			onSubmitAddress(e) {
				this.query.branch_jg = e.address.branch_no;
				this.query.branch_name = e.address.branch_name;
				this.login();
			}
		}
	};
</script>
<style scoped lang="scss">
	// @charset "UTF-8";

	.uni-common-mt {
		margin-top: 20upx;
	}

	.uni-padding-wrap {
		width: 750upx;
		padding: 0px 30upx;
	}

	.content {}

	.select-box {
		margin: 0 30upx;
	}

	.dates-box {
		background-color: #fcfdfd;
		padding: 20upx 30upx 0 30upx;
		border-radius: 15upx 15upx 0 0;
	}

	.chart-box {
		//height: 600upx;
		border-radius: 0 0 15upx 15upx;
		padding: 0 20upx 20upx 20upx;
		background-color: #fcfdfd;

		.money-block {
			width: 100%;
			padding-top: 20upx;
			border-top: 1rpx solid #d7d7d7;

			.money-item {
				width: 100%;
				height: 200upx;
				border-radius: 10upx;
				box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.2);

				.label {
					height: 90upx;
					font-size: 90upx;

					line-height: 90upx;
				}

				.money {
					width: 100%;
					height: 50upx;
				}

				label:nth-of-type(1) {
					height: 30upx;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fcfdfd;
					line-height: 62upx;
				}

				label:nth-of-type(2) {
					height: 38upx;
					font-size: 40upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #fcfdfd;
				}

				.unit {
					height: 38upx;
					font-size: 40upx;
					font-family: Source Han Sans CN;
					font-weight: 600;
					color: #fcfdfd;
				}

				.title {
					height: 24upx;
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fcfdfd;
				}
			}

			.money-item:nth-of-type(1) {
				background-color: red;

				.label {
					height: 90upx;
					font-size: 80upx;
					line-height: 90upx;
				}

				background-image: linear-gradient(to top right, RGBA(151, 214, 226, 1), RGBA(85, 210, 184, 1));
			}
		}
	}

	.retailDetails-box {
		border-radius: 15upx;
		background-color: #fcfdfd;
		margin-top: 25upx;

		//控制组件的缩进（外边距）
		.sun-tietleBox {
			margin: 0 20upx;

			//slot style 当前页面的样式
			.datas {
				.date {
					margin-right: 20upx;
					padding: 0 20upx;
					height: 51upx;
					border: 1upx solid #d7d7d7;
					border-radius: 100upx;

					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #717171;
				}

				.date {
					&:last-child {
						margin-right: 0px;
					}
				}

				.selected {
					background: #128a80;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fefefd;
				}
			}
		}


	}
</style>
